<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    用户名: <input class="username" /><br />
    密码: <input class="pwd" /><br />
    <button class="btn">提交</button>
    <script type="text/javascript">
      // ajax :a ：async （异步的） j：JavaScript  a：and  x ：xml
      // 主流的数据传输格式 ：1.json 2.xml
      // 无刷 ，局部刷新；
      let btnEle = document.querySelector(".btn");
      // ajax是js的内容
      // 4步；
      // 1.创建ajax对象
      let xhr;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else {
        xhr = new ActiveXObject();
      }
      btnEle.onclick = function () {
        let username = document.querySelector(".username").value;
        let pwd = document.querySelector(".pwd").value;
        // 2.打开ajax
        xhr.open("get", `addUser.php?username=${username}&pwd=${pwd}`, true); //默认是false 同步的ajax  ；true是异步的ajax

        // 3.发送ajax
        xhr.send();

        // 4.接收ajax成功的结果；
        // onload :发送成功且接收成功
        xhr.onload = function () {
          // 发送成功接收成功之后 可以获取接收的东西；
          // console.log( xhr.responseText);  //服务器返还的内容  ：就是服务器所有打印的内容
          console.log(JSON.parse(xhr.responseText));
        };
      };
    </script>
  </body>
</html>
